<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue 介绍</title>


		<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
		<!-- 引用本地的 vue.js -->
		<script src="../vue.js" type="text/javascript" charset="UTF-8">

		</script>
	</head>
	<body>
		<!-- 1. 声明式渲染 -->
		<!-- Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： -->
		<div id="vm1">
			<!-- {{message}} {{name}} 声明变量 -->
			<p>{{message}} {{name}}</p>
		</div>

		<!-- v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute -->
		<!-- 除了文本插值，我们还可以像这样来绑定元素 attribute： 
			如果你再次打开浏览器的 JavaScript 控制台，输入 vm2.message2 = '新标题'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
		-->
		
		<div id="vm2">
			<span v-bind:title="message2">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		
		<!-- 2. 条件与循环 
			继续在控制台输入 vm2.seen = false，你会发现之前显示的消息消失了
		 -->
		<div id="vm2">
			<p v-if="seen">现在你看到我了</p>
		</div>
		<!-- 
		v-for 指令可以绑定数组的数据来渲染一个项目列表：
		在控制台里，输入 vm4.todoes.push({ text: '新增项目' })，你会发现列表最后添加了一个新项目。
		 -->
		<div id="vm4">
			<li v-for="todo in todoes">
				{{todo.text}}
			</li>
		</div>
		
		<!-- 3. 处理用户输入 -->
		<!-- 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： -->
		<div id="vm5">
			<p>{{message}}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>

		<!-- Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 -->
		<div id="vm6">
			<p>{{message}}</p>
			<input v-model="message"/>
		</div>
		
		<!-- 4. 组件化应用构建 
			组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
			在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
			// 定义名为 todo-item 的新组件
			Vue.component('todo-item', {
			  template: '<li>这是个待办项</li>'
			})
			
			var app = new Vue(...)
			
			组件的定义，使之能够接受一个 prop：
						Vue.component('todo-item', {
						  // todo-item 组件现在接受一个
						  // "prop"，类似于一个自定义 attribute。
						  // 这个 prop 名为 todo。
						  props: ['todo'],
						  template: '<li>{{ todo.text }}</li>'
						})
			现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
			
		-->
		
		<div id="vm7">
		  <ol>
		    <!--
		      现在我们为每个 todo-item 提供 todo 对象
		      todo 对象是变量，即其内容可以是动态的。
		      我们也需要为每个组件提供一个“key”，稍后再
		      作详细解释。
		    -->
		    <todo-item
		      v-for="item in groceryList"
		      v-bind:todo="item"
		      v-bind:key="item.id"
		    ></todo-item>
		  </ol>
		</div>
		
		
		<script>
			
			var data = {
				message: 'hello vue js',
				name: 'vue',
				message2: '页面加载与 ' + new Date().toLocaleString(),
				seen:true,
				todoes:[
					{text:'学习JavaScript'},
					{text:'学习 Vue'},
					{text:'整个牛项目'}
				]
			}

			var vm = new Vue({
				el: '#vm1', // el 代表element
				/* data:{
					message:'hello vue.js ',
					name:'vue'
				} */
				data: data
			})
			
			var methods = {
				reverseMessage:function(){
					data.message = data.message.split('').reverse().join()
				}
			}
			
			vm.message = "修改了"
			data.message = '再次修改'

			vm.message == data.message
			vm.$data == data

			var vm2 = new Vue({
				el: '#vm2',
				data: data

			})
			
			var vm3 = new Vue({
				el:'#vm3',
				data:data
			})
			
			var vm4 = new Vue({
				el:'#vm4',
				data:data
			})
			
			//在控制台里，输入 vm4.todoes.push({ text: '新增项目' })，你会发现列表最后添加了一个新项目。
			vm4.todoes.push({text:'新item项目'})
			
			var vm5 = new Vue({
				el:"#vm5",
				data:data,
				methods:methods
			})
			
			var vm6 = new Vue({
				el:"#vm6",
				data:{
					message:"Hello Vue!"
				}
			})
			
			//定义一个组件
			Vue.component('todo-item', {
			  props: ['todo'],
			  template: '<li>{{ todo.text }}</li>'
			})
			
			var vm7 = new Vue({
				el: '#vm7',
				  data: {
				    groceryList: [
				      { id: 0, text: '蔬菜' },
				      { id: 1, text: '奶酪' },
				      { id: 2, text: '随便其它什么人吃的东西' }
				    ]
				  }
			})
			
		</script>
	</body>
</html>
